<template>
  <el-container>
    <el-row>
      <h4>系统信息</h4>
      <hr>
    </el-row>
    <el-row>
      <p class="line-text"><span>版本信息：</span>
        <span>{{systemInfo.title}}</span></p>
    </el-row>
    <el-row v-if="systemInfo.code == 1">
      <p class="line-text"><span>更新内容：</span>
        <span>{{systemInfo.content}}</span></p>
    </el-row>
    <el-row v-if="systemInfo.code == 1">
      <el-button size="small" type="primary" @click="updateSystem">立即更新</el-button>
    </el-row>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        systemInfo: {
          title: '',
          content: '',
          code: '',
        }
      };
    },
    methods: {
      /**
       * 加载系统信息
       * */
      loadSynUpdateInfo: function () {
        let _this = this;
        this.api.systemConfigSynUpdateInfo().then(function (res) {
          _this.systemInfo.title = res.msg;
          _this.systemInfo.content = res.data.content;
          _this.systemInfo.code = res.code;
        }).catch(function (res) {
          throw new Error(error);
        });
      },
      /**
       * 更新系统
       */
      updateSystem: function () {
        let _this = this;
        this.$confirm('正在进行系统更新, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.api.systemConfigSynUpdate().then(function (res) {
            if (res.code == 1) {
              _this.loadSynUpdateInfo();
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'success',
              });
            } else {
              _this.$message({
                showClose: true,
                message: res.msg,
                type: 'warning'
              });
            }
          }).catch(function (res) {
            throw new Error(error);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消该操作',
            code: 0
          })
        })
      }
    },
    mounted: function () {
      this.loadSynUpdateInfo();
    },
  }
</script>

<style scoped>

  .el-container {
    display: block;
    width: 95%;
    margin: 15px 0 15px 30px;
  }

  .line-text {
    color: #333;
  }

</style>
